<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加网址</title>
<style type="text/css">
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	color: #2c3e50;
}
.form-container {
  background-color: #eee;
  width: 500px;
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.form-item {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

input[type="text"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-container  > textarea {
  resize: vertical;
}

.submit-btn {
  background-color: #409eff;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #66b1ff;
}

.success-message {
  margin-top: 15px;
  padding: 10px;
  background-color: #f0f9eb;
  color: #67c23a;
  border-radius: 4px;
  text-align: center;
}
</style>
</head>
<body>
	<div id="app">
		  <form @submit.prevent="submitForm" class="form-container">
		    <div class="form-item">
		      <label for="name">网址目录：</label>
		      <input
		        type="text"
		        readonly="readonly"
		        id="name"
		        v-model="path"
		        required
		        placeholder="请输入名称"
		      />
		    </div>
		    <div class="form-item">
		      <label for="name">网址名称：</label>
		      <input
		        type="text"
		        id="name"
		        v-model="formData.name"
		        required
		        placeholder="请输入名称"
		      />
		    </div>
		
		    <div class="form-item">
		      <label for="content">收藏网址：</label>
		      <input
		        type="text"
		        id="url"
		        required
		        v-model="formData.url"
		        placeholder="请输入网址"
		      />
		    </div>
		
		    <div class="form-item">
		      <label for="description">网址描述：</label>
		      <textarea
		        id="desc"
		        v-model="formData.desc"
		        placeholder="请输入描述（可选）"
		        rows="4"
		      ></textarea>
		    </div>
		
		    <button type="submit" class="submit-btn">提交</button>
		    
		    <div v-if="showSuccessMessage" class="success-message">
		      提交成功！
		    </div>
		  </form>
	</div>

	<script src="vue@2.js"></script>
	<script src="axios.min.js"></script>
	<script>
    new Vue({
      el: '#app',
      data() {
        return {
          path: 'default',
          formData: {
            name: '',
            url: '',
            desc: ''
          },
          showSuccessMessage: false
        };
      },
      methods: {
    	  getPath() {
    		  return localStorage.getItem("path") || "default";
    	  },
    	    submitForm() {
    	        // 表单验证
    	        if (!this.formData.name || !this.formData.url) {
    	          alert('请填写必填字段');
    	          return;
    	        }

    	        // 模拟提交到 API
    	        console.log('提交数据：', this.formData);

				axios.get('/create/'+this.getPath()+'?name='+this.formData.name+'&url='+this.formData.url + '&desc='+this.formData.desc)
				  .then(response => {
	    	        // 显示成功提示
	    	        this.showSuccessMessage = true;
				  })
				  .catch(error => {
				    console.error('Error fetching videos:', error);
				  });
    	        
    	        // 清空表单
    	        this.formData = {
    	          name: '',
    	          url: '',
    	          desc: ''
    	        };

    	        // 2秒后隐藏成功提示
    	        setTimeout(() => {
    	          this.showSuccessMessage = false;
    	        }, 2000);
    	      }
      },
      created() {
    	this.path = this.getPath();
    	console.log(this.path);
      }
    });
  </script>
</body>
</html>
